<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大事件-后台登录</title>
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 1.0 导入bootstrap样式 -->
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/login.css">
</head>

<body>
    <!--container 是bootstrap的父容器  -->
    <div class="container">
        <!-- logo -->
        <img class="logo" src="./images/logo.png" alt="">

        <!-- 登录框-panel是bootstrap中的面板  -->
        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title"></h3>
            </div>
            <div class="panel-body">
                <!-- 登录框表单 form-horizontal 是bootstrap中的水平方向的表单 -->
                <form id="login_form" class="form-horizontal">
                    <div class="form-group">
                        <div class="col-sm-12 item">
                            <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名"
                                required>
                            <!-- 用户图标 -->
                            <i class="glyphicon glyphicon-user"></i>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-12 item">
                            <input type="password" class="form-control" id="password" name="password" required
                                placeholder="请输入密码">
                            <!-- 密码图标 -->
                            <i class="glyphicon glyphicon-lock"></i>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-12">
                            <button type="submit" id="login" class="btn btn-success btn-block">登录</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="./libs/jquery/jquery.min.js"></script>
    <!-- 导入一个layui的js -->
    <script src="./libs/layui/layui.js"></script>
    <script>
        $(function () {
            var layer;
            layui.use('layer', function () {
                layer = layui.layer;
            });

            // 给form表单注册一个提交事件
            $('#login_form').submit(function (e) {
                // 阻止浏览器的默认提交行为
                e.preventDefault();

                // 1.0 获取用户名和密码
                let username = $('#username').val();
                let password = $('#password').val();

                // 2.0 通过ajax将用户名和密码发送给服务器接口http://localhost:8080/api/v1/admin/user/login
                $.ajax({
                    url: 'http://localhost:8080/api/v1/admin/user/login',
                    type: 'post',
                    data: { username, password },
                    success: function (res) {
                        // 3.0 处理服务器响应回来的数据
                        // 3.0.1 判断res.code 不等于200表示处理失败
                        if (res.code !== 200) {
                            // alert('用户名和密码错误');
                            layer.msg('用户名或密码错误', {
                                time: 500 // 500毫秒以后自动关闭
                            });

                            // 清空用户名和密码
                            $('#username').val('');
                            $('#password').val('');
                            return; //阻止后面代码继续执行
                        }

                        // 3.0.2 如果res.code是200表示登录成功
                        // 1.0 将 res.token保存到本地存储中 
                        localStorage.setItem('token64', res.token);
                        // 2.0 跳转到首页
                        location.href = './index.html'
                        // console.log(res);

                    }
                })
            })
        })
    </script>

</body>

</html>